<template>
  <div :class="['TUIKit', isH5 && 'TUIKit-h5']">
    <!-- TUIKit 功能区 -->
    <div class="TUIKit-main-container">
      <div v-if="currentNavbar === 'conversation'" class="TUIKit-main">
        <div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside">
          <!-- <TUISearch searchType="global" /> -->
          <TUIConversation />
        </div>
        <div v-if="!isH5 || currentConversationID" class="TUIKit-main-main">
          <TUIChat>
            <h1 class="flex-grow">欢迎使用客服系统</h1>
          </TUIChat>
          <TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
          <TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" />
        </div>
        <TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" />
        <TUIContact displayType="selectFriend" />
      </div>
      <div v-else-if="currentNavbar === 'contact'" class="TUIKit-main">
        <TUIContact
          displayType="contactList"
          @switch-conversation="currentNavbar = 'conversation'"
        />
      </div>
      <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { TUIStore, StoreName, TUIConversationService } from '@tencentcloud/chat-uikit-engine'
import { TUICallKit } from '@tencentcloud/call-uikit-vue'
import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from '@/TUIKit'
import { isH5 } from '@/TUIKit/utils/env'
import { TUIChatEngine } from '@/TUIKit'
import * as IMApi from '@/api/blind/im'

const currentConversationID = ref<string>('')
const currentNavbar = ref<string>('conversation')

// 创建会话
const createConversation = async (userID: string) => {
  // DC：记录聊天信息 :向后台提交创建会话记录
  IMApi.createConversation({
    conversationID: `C2C${userID}`,
    founder: TUIChatEngine.userID, // 发送方
    participants: userID, // 接收方
    status: '1'
  }).then(async (res) => {
    TUIStore.update(StoreName.CUSTOM, 'CustomconversationID', res.recordID)
    TUIConversationService.switchConversation(`C2C${userID}`)
      .then(() => {
        console.warn('打开会话成功')
      })
      .catch((err: any) => {
        console.warn('打开会话失败', err.code, err.msg)
      })

    const resData = await TUIConversationService.getConversationProfile(`C2C${userID}`)
    console.log('创建会话成功', resData)
  })
}

// 监听会话
TUIStore.watch(StoreName.CONV, {
  currentConversationID: (id: string) => {
    currentConversationID.value = id
  }
})

onMounted(() => {
  // 获取路由参数
  const route = useRoute()
  const userID = route.params.id

  if (userID) {
    createConversation(userID as string)
  }
})

onUnmounted(() => {
  // 清空当前 会话ID
  TUIStore.update(StoreName.CUSTOM, 'CustomconversationID', '')
})
</script>
<style scoped lang="scss">
/* stylelint-disable-next-line import-notation */
@import '@/TUIKit/assets/styles/common.scss';
/* stylelint-disable-next-line import-notation */
@import '@/TUIKit/assets/styles/sample.scss';
</style>
